<template>
  <div>
    <!--    <img src="./assets/logo.png">-->
    <div v-for="item in formData" :key="item.value">
      <div class="blockText">{{ item.label }}</div>
      <div class="WageInformationBox">
        <el-form
          status-icon
          :model="ruleForm"
          size="mini"
          label-width="160px"
          class="content_form active content_form_small content_form_table"
          style="display:initial!important;width:100%"
        >
          <template v-for="item1 in item.children">
            <div
              class="WageInformationBox-content"
              :key="item1.id"
              style="width: 150px !important;display: inline-block"
            >
              <div class="WageInformationBox-content-title" v-if="item1.ifDriDown == '1'">
                {{ item1.label }}
              </div>
              <div class="WageInformationBox-content-title" v-else>
                {{ item1.label }}
              </div>
              <div class="WageInformationBox-content-content">
                <div
                  class="form_grid click noedit"
                  v-if="item1.disabled && item1.ifDriDown == '1'"
                  @click="agencyLevelClick(item1.children, item1.id)"
                >
                  {{ item1.value ? item1.value : 0 }}
                </div>
                <el-input-number
                  v-else
                  v-model="item1.value"
                  :ref="'parentId=' + item1.parentId"
                  :name="item1.id"
                  size="mini"
                  :min="0"
                  :controls="false"
                  :precision="0"
                  :disabled="item1.disabled"
                  @input="handleInput($event, item1, item.children)"
                >
                </el-input-number>
              </div>
            </div>
            <br :key="item1.index" v-if="item1.isNewline == '1'" />
          </template>
        </el-form>
      </div>
    </div>
    <div>
      <p>
        If Element is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button @click="throttle1">el-button</el-button>master
      <el-button @click="throttle2">el-button2</el-button>
      <el-button @click="throttle2()()">el-button2()</el-button>
      <el-button @click="callThrottle2">callThrottle2</el-button>
      <el-button
        @click="
          _.throttle(function() {
            request
          }, 3000)
        "
        >el-button3</el-button
      >
      <el-button @click="returnFunc()">returnFunc</el-button>
      <el-button @click="throttleTest">throttleTest</el-button>
    </div>
    <el-input ref="ref-input" :value="val" :parentId="888"></el-input>
    <!--    <el-input ref="ref-input" :value="val" :parentId="888"></el-input>-->
    <el-button @click="doing">set</el-button>
    <el-progress :percentage="loading"></el-progress>
    <el-form ref="form" :model="form" label-width="4rem">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <div :class="{ red: true }">
        <el-divider direction="vertical"></el-divider>
      </div>
    </el-form>

    <el-button @click="showDlg = true">showDlg</el-button>
    <dlg :showDlg.sync="showDlg"></dlg>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <!--    自定义的 v-model-->
    <!--    一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件-->
    <inputComponent v-model="inputValue"></inputComponent>
    <el-button @click="inputValue = 'ljhoeeer'">set input</el-button>

    <form action="/" method="post" enctype="multipart/form-data">
      <input type="text" name="description" value="some text" />
      <input type="file" name="myFile" />
      <button type="submit">Submit</button>
    </form>

    <table style="border: solid 1px #ddd;">
      <tr v-for="row in arr" :key="row.id">
        <td :colspan="row.colspan" :rowspan="row.rowspan" v-if="row.rowspan !== null">
          {{ row.label }}
        </td>
        <template v-if="row.studentLevel === '01' || row.studentLevel === '02'">
          <td
            v-if="row.subTypeName && !(row.subTypeColSpan === null && row.subTypeRowSpan === null)"
            :colspan="row.subTypeColSpan"
            :rowspan="row.subTypeRowSpan"
          >
            {{ row.subTypeName }}
          </td>
        </template>
        <template v-else>
          <td
            v-if="row.subTypeName && !(row.subTypeColSpan === null && row.subTypeRowSpan === null)"
            :colspan="row.subTypeColSpan"
            :rowspan="row.subTypeRowSpan"
          >
            {{ row.subTypeName }}
          </td>
        </template>
        <td v-if="row.subDetailKey">{{ row.subDetailKey }}</td>
        <td>
          <el-input
            v-model="row.value"
            :readonly="row.isEdit === 'N'"
            @input="handleInput($event, row.prop, row.parentId)"
            :prop="row.prop"
            :parentId="row.parentId"
          ></el-input>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import dlg from '../components/dlg.vue'
import inputComponent from '../components/input-component.vue'
import _ from 'lodash'

export default {
  components: {
    dlg,
    inputComponent
  },
  data() {
    return {
      inputValue: '',
      showDlg: false,
      loading: 0,
      val: 'ttt',
      fileList: [
        {
          name: 'food.jpeg',
          url:
            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url:
            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      form: {
        name: ''
      },
      studentInfoList: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      tableColumns: [
        {
          label: '日期',
          childrens: [
            {
              prop: 'year',
              label: '年份',
              width: 200
            },
            {
              prop: 'month',
              label: '月份',
              width: 100
            },
            {
              label: '时间',
              childrens: [
                {
                  prop: 'day',
                  lable: '天',
                  width: 100
                }
              ]
            }
          ]
        },
        {
          prop: 'name',
          label: '姓名',
          width: 250
        },
        {
          prop: 'address',
          label: '地址',
          width: 250
        }
      ],
      param: '',
      arr: [
        {
          id: 'ADAC53295DE427B8E0536F01A8C03FA21111',
          label: '合计',
          prop: '1',
          type: null,
          tagText: null,
          parentId: null,
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: 1,
          colspan: 3,
          studentLevel: '01',
          // *******
          subTypeName: null,
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: null
        },
        {
          id: 'ADAC53295DE427B8E0536F01A8C03FA1222',
          label: '文科',
          prop: '10',
          type: null,
          tagText: null,
          parentId: '1',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: 10,
          colspan: 1,
          studentLevel: '01',
          // *******
          subTypeName: '小计',
          subTypeColSpan: 2,
          subTypeRowSpan: 1,
          subDetailKey: null
        },
        {
          id: 'ADAC53295DE427B8E0536F01A8C99FA1333',
          label: '文科',
          prop: '1001',
          type: null,
          tagText: null,
          parentId: '10',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '德语',
          subTypeColSpan: 1,
          subTypeRowSpan: 3,
          subDetailKey: '小计'
        },
        {
          id: 'jrjr',
          label: '文科',
          prop: '1002',
          type: null,
          tagText: null,
          parentId: '1001',
          value: null,
          isTotal: 'N',
          isEdit: 'Y',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '德语',
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: '公办博士'
        },
        {
          id: 'jtyjty',
          label: '文科',
          prop: '1003',
          type: null,
          tagText: null,
          parentId: '1001',
          value: null,
          isTotal: 'N',
          isEdit: 'Y',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '德语',
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: '自费博士'
        },
        {
          id: 'rt',
          label: '文科',
          prop: '1010',
          type: null,
          tagText: null,
          parentId: '10',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '非通用语',
          subTypeColSpan: 1,
          subTypeRowSpan: 3,
          subDetailKey: '小计'
        },
        {
          id: 'ADAC53295DE427B8E0536F01A8Ckuuyk99FA1555',
          label: '文科',
          prop: '1011',
          type: null,
          tagText: null,
          parentId: '1010',
          value: null,
          isTotal: 'N',
          isEdit: 'Y',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '非通用语',
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: '公办博士'
        },
        {
          id: 'ADAC53295DE427B8E0536jtyjtyF01A8C99FA1555',
          label: '文科',
          prop: '1012',
          type: null,
          tagText: null,
          parentId: '1010',
          value: null,
          isTotal: 'N',
          isEdit: 'Y',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '非通用语',
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: '自费博士'
        },
        {
          id: 'th',
          label: '文科',
          prop: '1020',
          type: null,
          tagText: null,
          parentId: '10',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '其他文科',
          subTypeColSpan: 1,
          subTypeRowSpan: 3,
          subDetailKey: '小计'
        },
        {
          id: 'ADAC53295DE427B8E0536F01A8C9grgr9FA1555',
          label: '文科',
          prop: '1021',
          type: null,
          tagText: null,
          parentId: '1020',
          value: null,
          isTotal: 'N',
          isEdit: 'Y',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '其他文科',
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: '公办博士'
        },
        {
          id: 'ADAC53295DE427B8E0536F01A8C99FA1fefe555',
          label: '文科',
          prop: '1022',
          type: null,
          tagText: null,
          parentId: '1020',
          value: null,
          isTotal: 'N',
          isEdit: 'Y',
          rowspan: null,
          colspan: null,
          studentLevel: '01',
          // *******
          subTypeName: '其他文科',
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: '自费博士'
        }
      ],
      specialarr: [
        {
          id: 'ADAC53295DE427B8E0536F01A8C03FA2',
          label: '合计',
          prop: '1',
          type: null,
          tagText: null,
          parentId: null,
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: 1,
          colspan: 2,
          studentLevel: '04',
          children: [],
          // *******
          subTypeName: null,
          subTypeColSpan: null,
          subTypeRowSpan: null,
          subDetailKey: null
        },
        {
          id: 'ADAC53295DE427B8E0536F01A8C03fwgrghFA2',
          label: '文科',
          prop: '10',
          type: null,
          tagText: null,
          parentId: '1',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: 4,
          colspan: 1,
          studentLevel: '04',
          children: [],
          // *******
          subTypeName: '小计',
          subTypeColSpan: 1,
          subTypeRowSpan: 1,
          subDetailKey: null
        },
        {
          id: 'ADAC53295DE427B8E0536grehrthF01A8C03fwgrghFA2',
          label: '文科',
          prop: '11',
          type: null,
          tagText: null,
          parentId: '10',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: null,
          colspan: null,
          studentLevel: '04',
          children: [],
          // *******
          subTypeName: '德语',
          subTypeColSpan: 1,
          subTypeRowSpan: 1,
          subDetailKey: null
        },
        {
          id: 'ADAC53295DE427B8E0grgre536grehrthF01A8C03fwgrghFA2',
          label: '文科',
          prop: '12',
          type: null,
          tagText: null,
          parentId: '10',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: null,
          colspan: null,
          studentLevel: '04',
          children: [],
          // *******
          subTypeName: '非通用语',
          subTypeColSpan: 1,
          subTypeRowSpan: 1,
          subDetailKey: null
        },
        {
          id: 'ADAC53295DE427B8E0grggrgrgre536grehrthF01A8C03fwgrghFA2',
          label: '文科',
          prop: '13',
          type: null,
          tagText: null,
          parentId: '10',
          value: null,
          isTotal: 'Y',
          isEdit: 'N',
          rowspan: null,
          colspan: null,
          studentLevel: '04',
          children: [],
          // *******
          subTypeName: '其他文科',
          subTypeColSpan: 1,
          subTypeRowSpan: 1,
          subDetailKey: null
        }
      ],
      formData: [],
      ruleForm: {}
    }
  },
  created() {
    var params = {
      points: [1, 3, 4]
    }
    var nor = {
      points: 2345
    }
    const p = qs.stringify(params, { arrayFormat: 'comma', encode: false })

    const n = qs.stringify(nor)
    console.log('params', p)
    console.log('n', n)
    console.log('decode p', decodeURI(p))
    // this.param = qs.stringify(params)
    // // console.log(qs.stringify({ a: [1, 2, 3] }))
    // console.log(this.param)
    // axios.get('form.json').then((res) => {
    //   // this.formData = res.data
    // })
    axios
      .get('/goods/goodsList', {
        params: {
          limit: 5,
          page: 1
        }
      })
      .then(data => {
        console.log(data)
      })
    this.throttleTest = this._.debounce(this.request, 3000)
  },
  mounted() {
    // console.log($('.el-form'))
    axios
      .get('/goods/goodsList', {
        params: {
          limit: 5,
          page: 1
        }
      })
      .then(data => {
        // console.log(data)
      })
  },
  methods: {
    returnFunc() {
      return function() {
        console.log(113243543635654)
      }
    },
    throttle1: _.throttle(
      function() {
        // axios.get('https://jsonplaceholder.typicode.com/posts/').then((data) => { console.log('throttle1 data', data) })
        this.request()
      },
      3000,
      { trailing: true }
    ),
    throttle2() {
      return this._.throttle(
        function() {
          axios.get('https://jsonplaceholder.typicode.com/posts/').then(data => {
            console.log('throttle2 data', data)
          })
        },
        3000,
        { trailing: false }
      )
    },
    callThrottle2() {
      this.throttle2()()
    },
    request() {
      axios.get('https://jsonplaceholder.typicode.com/posts/').then(data => {
        console.log('datadddd', data)
      })
    },
    doing() {
      const t = setInterval(() => {
        this.loading += 10
        if (this.loading === 100) {
          clearInterval(t)
        }
      }, 1000)
    },
    handleSuccess(res, file, fileList) {
      // console.log('res', res)
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    download() {
      const vm = this
      axios({
        url: 'http://localhost:8081/download', // 接口名字
        method: 'GET',
        responseType: 'blob',
        params: null,
        withCredentials: false,
        onDownloadProgress: progress => {
          console.log(progress)
          console.log('progress.loaded', progress.loaded)
          // console.log('progress.target.response.size', progress.target.response.size)
          // console.log(Math.round(progress.loaded / progress.target.response.size * 100) + '%')
          // alert('success')
          vm.loading = (progress.loaded / progress.total) * 100
          if (vm.loading === 100) {
            vm.$message('成功')
            // alert('success')
          }
        }
      }).then(function(response) {
        $('.loading_box').addClass('hidden')
        const blob = new Blob([response.data], { type: 'application/x-msdownload;charset=UTF-8' })
        if (blob.size === 0) {
          // if (failure) {
          //   failure()
          // }
          return false
        }
        const aEle = document.createElement('a') // 创建a标签
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        aEle.href = href
        aEle.download = 'title.xls' // 下载后文件名
        document.body.appendChild(aEle)
        aEle.click() // 点击下载
        document.body.removeChild(aEle) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      })
    },
    set() {
      // this.val = 'fff'
      console.log(this.$refs['ref-input'])
      // this.$refs['ref-input'].$attrs.xxx = 11111111
      // console.log(this.$refs.form)
    },
    agencyLevelClick(childrenList, id) {
      this.agencyLevelList = childrenList
      this.agencyLevelListId = id
      console.log(this.agencyLevelList)
      this.activatedVisible = true
    },
    handleInput(e, item, childrenArr) {
      const parentId = item.parentId
      const arr = []
      const inputDom = this.$refs['parentId=' + parentId]
      inputDom.forEach(item => {
        if (item.$refs && item.$refs.input) {
          arr.push(item.$refs.input.value)
        }
      })
      const sum = arr.reduce((x, y) => {
        return Number(x) + Number(y)
      })
      console.log('sum', sum)
      childrenArr.forEach(item => {
        if (item.id === parentId) {
          item.value = sum
        }
      })
    }
  }
}
</script>

<style>
.row {
  display: flex;
}

.row div {
  line-height: 28px;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.sub_row {
  display: flex;
}

.border {
  border: solid 1px #ddd;
  box-sizing: border-box;
}

.border .el-input__inner {
  border: none !important;
  height: auto;
  line-height: initial;
}

table td {
  border: solid 1px #ddd;
}

.red {
  background: red !important;
}
</style>
